<template>
  <div>
    <el-row class="card-row">
      <el-col :span="7">
        <!--    查询模块-->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>查询功能</span>
          </div>
          <div class="card-item">
            <div><el-button type="text" @click="pushRouterBtn('budget/approve')">投资项目库</el-button></div>
            <div><el-button type="text" @click="pushRouterBtn('budget/ledger')">数字台账</el-button></div>
            <div><el-button type="text" @click="pushRouterBtn('budget/cost')">费用管理</el-button></div>
            <div><el-button type="text" @click="pushRouterBtn('budget/completionStatus')">工作量及投资</el-button></div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="7">
        <!--    统计模块-->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>统计分析</span>
          </div>
          <div class="card-item">
            <div><el-button type="text" @click="pushRouterBtn('process/costAnalysis')">查询分析</el-button></div>
            <div><el-button type="text" @click="pushRouterBtn('process/individual')">单项成本分析</el-button></div>
            <div><el-button type="text" @click="pushRouterBtn('process/costComparison')">数据同期对比</el-button></div>
            <div><el-button type="text" @click="pushRouterBtn('process/statistics')">汇总统计</el-button></div>
            <div><el-button type="text" @click="pushRouterBtn('process/singlestatistics')">台账明细</el-button></div>
            <div><el-button type="text" @click="pushRouterBtn('process/completionView')">工作量及投资统计</el-button></div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="7">
        <!--    统计模块-->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>预警</span>
          </div>
          <div class="card-item">
            <div><el-button type="text">预警详情</el-button></div>
            <div><el-button type="text" @click="pushRouterBtn('/warning/settingWarningValue')">预警值配置</el-button></div>
<!--            <div><el-button type="text" @click="pushRouterBtn('warning/costWarning')">单井预警</el-button></div>-->
          </div>
        </el-card>
      </el-col>
    </el-row>




<!--    下方统计图-->
<!--      <div slot="header">-->
<!--        <el-form :inline="true">-->
<!--          <el-form-item label="查看类型">-->
<!--            <el-select @change="changeRegion" v-model="formInline.region" placeholder="请选择">-->
<!--              <el-option label="按月份查看" value="month"></el-option>-->
<!--              <el-option label="按季度查看" value="quarter"></el-option>-->
<!--              <el-option label="按年份查看" value="year"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
<!--      </div>-->
      <IndexEcharts class="chartCard"></IndexEcharts>
  </div>
</template>
<script>
import IndexEcharts from "./components/indexEcharts.vue";
export default {
  name: "index",
  components: {IndexEcharts},
  data() {
    return {
      formInline: {
        region: 'month'
      }
    }
  },
  methods: {
    // 切换图表类型
    changeRegion() {

    },

    pushRouterBtn(path) {
      this.$router.push(path)
    }
  }
}
</script>
<style scope>
.card-row {
  margin: 21px;
  display: flex;
  justify-content: space-between;
  height: 280px;
}
.box-card {
  height: 100%;
}
.card-item {
  display: flex;
  flex-direction: column;
}
.clearfix {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  color: #409EFF;
}
.box-card:hover .clearfix {
  color: #304156;
}
.chartCard {
  margin:  0 80px
}
</style>
